<template>
  <div>

    <!-- 面包屑导航区 -->
    <bread-crumb :breadPath="breadPath"></bread-crumb>

    <!-- 卡片视图区 -->
    <el-card class="box-card">
      <!-- 权限列表区 -->
      <el-table :data="rightsList" border stripe>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="权限名称" prop="authName"></el-table-column>
        <el-table-column label="路径" prop="path"></el-table-column>
        <el-table-column label="权限等级">
          <template v-slot:default={row}>
            <!-- v-slot:default="scope" -->
            <!-- 等级标签 -->
            <el-tag v-if="row.level === '0'" >一级权限</el-tag>
            <el-tag v-else-if="row.level === '1'" type="success" >二级权限</el-tag>
            <el-tag v-else type="warning" >三级权限</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

  </div>
</template>

<script>
  import breadCrumb from '@/components/breadcrumb'
  import {getRights} from '@/api/power.js'

  export default {

    data() {
      return {
        // 面包屑 传参
        breadPath: ['权限管理', this.$route.query.bread],
        rightsList: [],
      }
    },
    created() {
      this.getRightsList();
    },

    methods: {
      // 获取权限列表数据
      async getRightsList() {
        try {
          const { data: res } = await getRights('list'); 
          console.log(res);
          this.rightsList = res;
        } catch (err) {
          console.log(err);
        }
      },
    },

    components: {
      breadCrumb,
    }

  }
</script>

<style lang="less" scoped>

</style>